<template>
  <router-view class="router-view" v-slot="{ Component }">
    <transition :enter-active-class="enterClass"
                :leave-active-class="leaveClass">
      <component :is="Component"/>
    </transition>
  </router-view>
</template>

<script>
import {ref, watch} from "vue";
import {useRoute} from "vue-router";
import animate from "animate.css";

export default {
  name: "App",
  setup() {
    let enterClass = ref('');
    let leaveClass = ref('');
    const route = useRoute();
    // 监控路由的变化
    watch(
        () => route.meta.tranitionClass,
        (tranitionClass) => {
          if (tranitionClass === 'jump') {
            enterClass.value = 'animate__animated animate__fadeIn'
            leaveClass.value = 'animate__animated animate__fadeOut'
          } else if (tranitionClass === 'back') {
            enterClass.value = 'animate__animated animate__fadeInLeft'
            leaveClass.value = 'animate__animated animate__fadeOutLeft'
          } else {
            enterClass.value = 'animate__animated animate__rollIn'
            leaveClass.value = 'animate__animated animate__rollOut'
          }
        }
    );
    return {enterClass, leaveClass};
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.router-view {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
</style>
